import React, { Component } from 'react';
import { View, Text } from 'react-native';

import ScrollableTabView, { DefaultTabBar, ScrollableTabBar } from 'react-native-scrollable-tab-view';

import LeftExpendList from './ExpendList'
import RightExpendList from './ExpendList'


class Home extends Component {
    state = {};

    static navigationOptions = ({ navigation, screenProps }) => ({
        // title: navigation.state.params?navigation.state.params.title:null,
        headerTitle:navigation.state.params.title,
        headerStyle:{ backgroundColor: 'rgba(0,171,236,1)'},//导航栏的样式

});


    render() {
        return (
            <View style={{ flex: 1 }}>
                {/* <Text> 开支流水!</Text> */}
                <ScrollableTabView
                    renderTabBar={() => <DefaultTabBar />}
                    scrollWithoutAnimation={true}
                    tabBarBackgroundColor='rgba(0,171,236,1)'
                    tabBarUnderlineStyle={{ backgroundColor: 'white' }}
                    tabBarActiveTextColor='white'
                    onChangeTab={
                        (obj) => {
                            console.log('切换到了' + obj.i + '个');
                        }
                    }
                    onScroll={
                        //Float
                        (posit) => {
                            console.log('监听到滚动' + posit);
                        }
                    }
                >
                    <LeftExpendList nav={this.props.navigation.navigate} status='0' ref='LeftExpendList' tabLabel="未报销"></LeftExpendList>
                    <RightExpendList nav={this.props.navigation.navigate} status='1' ref='RightExpendList' tabLabel="已报销"></RightExpendList>
                </ScrollableTabView>
            </View>
        );
    }
}

export default Home;
